<template>
    <div class="yue_content">
      <jm-head ref="head"></jm-head>
        <div class="yue_header">
            <h1>{{$store.state.userInfo.gold}}</h1>
            <p>账号金额</p>

        </div>
        <van-tabs v-model="active" @click="onClickNav" style="margin-top: -1px;">
            <van-tab title="余额" name="0">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    :offset="1"
                    finished-text="没有更多了"
                    @load="getDealList"
                    v-if="active == 0"
                    >
                    <div class="pay_content box" >
                        <div class="pay_content_top box">
                            <span class="fl">余额：</span><span class="num fl">{{$store.state.userInfo.gold}}</span><span class="fr tixian" @click="toChongzhi">充值</span>
                        </div>
                        <div class="pay_content_list">
                            <div class="pay_block box"  v-for = "item of list" :key = "'gold' + item.id">
                                <h2>{{item.reason}}<span class="fr">{{item.amount}}</span></h2>
                                <p>订单ID：{{item.deal_item_id}}</p>
                                <p v-if="item.deal_type ==7">来自用户ID：{{item.deal_user_id}}</p>
                                <p>时间：{{item.created_at}}<span class="fr">余额：{{item.new_balance}}</span></p>

                            </div>
                        </div>
                    </div>
                </van-list>
            </van-tab>
            <van-tab title="提现" name="1">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="withDraw"
                    v-if="active == 1"
                    >
                    <div class="pay_content box" >
                        <div class="pay_content_top box">
                            <span class="fl">余额：</span><span class="num fl">{{$store.state.userInfo.gold}}</span><span class="fr tixian" @click="toTixian">提现</span>
                        </div>
                        <div class="pay_content_list">
                            <div class="pay_block box"   v-for = "item in list" :key = "'withdraw' + item.id">
                                <p v-if="item.status!=2">{{withDrawStatus[item.status]}}</p>
                                <p v-else>{{withDrawStatus[item.status]}}（{{item.why}}）</p>
                                <p>提现银行卡："尾号"{{item.bank_code.slice(-4)}}</p>
                                <p>申请时间：{{item.apply_at}}<span class="fr">金额：{{item.withdraw / 100}}</span></p>
                            </div>
                        </div>
                    </div>
                </van-list>
            </van-tab>

        </van-tabs>


    </div>
</template>
<script>
    import Vue from 'vue'
    import { getDealList, withDraw } from "@/api/yue";
    import JmHead from '../head/head'
    import { Tab, Tabs, List } from 'vant';
    Vue.use(Tab).use(Tabs).use(List)
    export default {
        name: 'yue',
        components: {
            JmHead
        },
        data () {
            return {
                active: 0,
                list: [],
                type: 1,
                page: 1,
                loading: false,
                finished: false,
                withDrawStatus: []
            }
        },
        activated(){
            this.$store.dispatch('getUserInfo')
            this.onClickNav(0)

            this.$refs.head.setNavBarUrl()
        },
        methods: {
           getDealList() {
                const that = this
                getDealList({type: this.type, page: that.page}).then(res => {
                    that.page++
                    that.loading = false
                    if (that.page > res.data.last_page) {
                        that.finished = true
                    }
                    that.list = that.list.concat(res.data.data)
                })
            },
            withDraw() {
                const that = this
                withDraw({page: that.page}).then(res => {
                    that.page++
                    that.loading = false
                    if (that.page > res.data.lists.last_page) {
                        that.finished = true
                    }
                    that.list = that.list.concat(res.data.lists.data)
                    that.withDrawStatus = res.data.status
                })
            },

            toTixian(){
                this.$router.push({path: '/tixian'})
            },
            toChongzhi(){
                this.$router.push({path: '/chongzhi'})
            },
            onClickNav(title){
                this.list = []
                this.finished = false
                this.page = 1
                const _this = this
                if (parseInt(title) === 0) {
                    this.active = -1
                    setTimeout(function(){
                      _this.active = parseInt(title)
                    }, 100)
                }
            }
        }
    }
</script>

<style>
.van-tabs--line .van-tabs__wrap{
    padding-bottom: 15px!important;
    background: #deb985;
}
</style>
<style lang="stylus" scoped>
    .yue_content >>> .van-tabs__nav
        background-color #deb985
    .yue_content >>> .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after
        border-width 0
    .yue_content >>> .van-tabs__line
        background-color #000
        width 1rem !important
    .yue_content >>> .van-tab--active
        color #000
        font-weight 600
    .yue_content >>> .van-tab
        font-size .28rem

    .yue_content
        width 100%
        height 100%
        overflow hidden
        background #fff
        .yue_header
            width 100%
            overflow hidden
            background #deb985
            padding .7rem 0  0
            h1
                width 100%
                text-align center
                line-height .5rem
                font-size .38rem
                font-weight 600
                color: #68401c
                padding: 0.1rem
            p
                width 100%
                text-align center
                line-height .5rem
                font-size .28rem
                font-weight 600
                color #d64532
            .item_nav
                width 60%
                margin .3rem auto
                overflow hidden
                div
                    line-height .4rem
                    font-size .30rem
                    color #896855
                    padding-bottom .1rem
                    float left
                    &:last-child
                        float right
                .active
                    color #000
                    font-weight 600
                    border-bottom 2px solid #000
        .pay_content
            width 100%
            overflow hidden
            border-radius .3rem
            background #ffffff
            .pay_content_top
                width 100%
                padding .3rem
                overflow hidden
                border-bottom 1px solid #eee

                span
                    display inline-block
                    line-height .5rem
                    font-size .28rem
                    color #000
                .num
                    font-size .36rem
                    color #d64532

                .tixian
                    color #ffffff
                    padding 0 .3rem
                    background #c29462
                    border-radius .5rem
            .pay_content_list
                width 100%
                overflow hidden
                .pay_block
                    width 100%
                    overflow hidden
                    padding .3rem
                    border-bottom 1px solid #eee
                    h2
                        line-height .4rem
                        font-size .30rem
                        color #323233
                        span
                            color #d64532
                    p
                        line-height .4rem
                        font-size .26rem
                        color #6d6d6d
                        margin-top .06rem


</style>
